<!-- 项目基本信息(查看投资架构图)组件 -->
<template>
  <div class="skyEyeCheckAuto">
    <el-input
      v-model="svalue"
      :placeholder="$t(placeholder)"
      :clearable="false"
      show-word-limit
      :maxlength="100"
      :value="svalue"
    >
      <template v-if="queryButton" slot="append">
        <span @click="chartOpenHandle(dealId)">{{ $t('查看投资架构图') }}</span>
      </template>
    </el-input>
    <el-dialog :title="$t('')" :visible.sync="chartOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <invest-structure-chart ref="investStructureChart" :chart-data="chartData" :btn-list="btnList" />
    </el-dialog>
  </div>
</template>
<script>
  import investStructureChart from '@/views/deal/base/investStructureChart'
  import { investChartData } from '@/api/fund/fundBase'
  import { getDealBase } from '@/api/base/deal/dealBase'

  export default {
    name: 'InvestmentStructureChar',
    components: {
      investStructureChart
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: () => '请输入'
      },
      // 是否开启查询按钮
      queryButton: {
        type: Boolean,
        default: false
      },
      // 项目id
      dealId: {
        type: String,
        default: () => ''
      }
    },
    data() {
      return {
        form: {},
        // 项目名称
        svalue: undefined,
        // -------- 股权架构图
        chartData: {},
        // 图形遮罩层
        chartOpen: false,
        btnList: [
          {
            name: '出资人',
            type: 'investor',
            color: 'rgba(183,221,232)'
          },
          {
            name: 'GP',
            type: 'gp',
            color: 'rgba(254,229,153)'
          },
          {
            name: '投资主体',
            type: 'fund',
            color: 'rgba(221,214,229)'
          },
          {
            name: 'SPV',
            type: 'spv',
            color: 'rgba(215,227,191)'
          },
          {
            name: '项目',
            type: 'deal',
            color: 'rgba(216,216,216)'
          }
        ]
      }
    },
    watch: {
      value: {
        handler(svalue) {
          if (svalue) {
            this.svalue = svalue
          } else {
            this.svalue = ''
          }
        },
        deep: true,
        immediate: true
      },
      svalue: {
        handler(svalue) {
          if (svalue) {
            this.svalue = svalue
          } else {
            this.svalue = ''
          }
          this.$emit('input', this.svalue)
        },
        deep: true,
        immediate: true
      }
    },
    created() {

    },
    mounted() {
    },
    methods: {
      chartOpenHandle() {
        this.chartOpen = true
        investChartData(this.dealId).then(res => {
          this.chartData = res.data
        })
        getDealBase(this.dealId).then(response => {
          this.form = response.data
          this.$nextTick(() => {
            this.$refs.investStructureChart.initCompany({ busId: this.form.company.id, busType: 'company', busName: this.form.company.companyName })
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
